<template>
  <!--pages/my/my.wxml-->
  <view class='container'>
    <view class='top-container'>
      <image class='bg-img' src='../../static/images/my/mine_bg_3x.png'></image>
      <view :hover-stay-time="150" @tap='logout' class='logout' hover-class="opcity">
        <image class='logout-img' src='../../static/images/my/icon_out_3x.png' v-show='isLogin'></image>
        <text class='logout-txt' v-show='isLogin'>退出</text>
      </view>
      <view class='user-wrapper' v-if="!isLogin">
        <navigator :hover-stay-time="150" class='user' hover-class="opcity" url='../login/login'>
          <image class='avatar-img' src='../../static/images/my/mine_def_touxiang_3x.png'></image>
          <text class='user-info-mobile'>请登录</text>
        </navigator>
      </view>
      <view class='user' v-else>
        <image class='avatar-img' src='../../static/images/my/TomAndJerry.jpg'></image>
        <view class='user-info-mobile'>
          <text>{{username}}</text>
          <view :hover-stay-time="150" @tap="edit" class='edit-img' hover-class="opcity">
            <image src='../../static/images/my/mine_icon_bianji_3x.png'></image>
          </view>
        </view>
      </view>
    </view>

    <view class='bottom-container'>
      <view class='ul-item'>
        <view v-for="item in maps">
          <view :hover-stay-time="150" @click='toMap(item)' class='item' hover-class="opcity">
            <image :src='item.img' class='item-img'></image>
            <text class='item-name'>{{item.value}}</text>
          </view>
        </view>
      </view>
    </view>

    <view class='self-bottom-container'>
      <view v-for="item in items">
        <tui-list-cell @click="toItem(item)" arrow="true" class="tui-list">
          <tui-icon :color="item.color" :name="item.icon" size="24"></tui-icon>
          <text class="tui-list-cell-name">{{item.value}}</text>
        </tui-list-cell>
      </view>

    </view>

    <tui-footer :copyright="copyright" :fixed="false"></tui-footer>
  </view>
</template>

<script>
  import {mapActions, mapState} from 'vuex'
  import tuiFooter from "@/components/footer/footer"
  import tuiListView from "@/components/list-view/list-view"
  import tuiListCell from "@/components/list-cell/list-cell"
  import tuiIcon from "@/components/icon/icon"
  import TuiButton from "../../components/button/button";

  export default {
    components: {
      TuiButton,
      tuiListView,
      tuiListCell,
      tuiIcon,
      tuiFooter
    },
    computed: mapState(['isLogin', 'username']),
    data() {
      return {
        copyright: " Copyright © 2014-2019 Somliy.",
        // maps: [
        //   {value: '加油站', img: '../../static/images/my/mine_icon_jiayouzhan_3x.png'},
        //   {value: '停车场', img: '../../static/images/my/mine_icon_tingche_3x.png'},
        //   {value: '充电桩', img: '../../static/images/my/mine_icon_chongdian_3x.png'},
        // ],
        items: [
          {value: '我的报修记录', icon: 'wealth-fill', color: '#5677fc', url: '/pages/user/userOrder'},
          {value: '我的个人信息', icon: 'service-fill', color: '#5677fc', url: '/pages/user/edit/edit'},
          {value: '重置密码', icon: 'service-fill', color: '#5677fc', url: '/pages/user/forgot/forgot'},
          {value: '修改密码', icon: 'explore-fill', color: '#5677fc', url: '/pages/user/modify/modify'},
          {value: '示例', icon: 'shop-fill', color: '#5677fc', url: '/pages/example/list/list'}
        ]
      }
    },
    onShow() {
      console.log('是否登录', this.isLogin);
      console.log('vuex', JSON.stringify(this.$store.state.userInfo))
    },
    methods: {
      ...mapActions(['storeLogout']),
      logout() {
        uni.showModal({
          title: '提示',
          content: '确定退出登录？',
          confirmColor: '#5677FC',
          success: (res) => {
            if (res.confirm) {
              this.storeLogout();
              console.log('vuex', JSON.stringify(this.$store.state.userInfo))
            }
          }
        });
      },
      edit() {
        this.tui.toast("功能开发中~")
      },
      toMap(item) {
        this.tui.toPage(`/pages/maps/maps?key=${item.value}`)
      },
      toItem(item) {
        if (item.url) {
          this.tui.toPage(item.url)
        } else {
          this.tui.toast("暂无")
        }
      }
    }
  }
</script>

<style lang="css" scoped>
  @import "my.css";
</style>
